<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增类对象信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-table-add">
            <h4 class="form-header h4">类对象信息信息</h4>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">表名称：</label>
                <div class="col-sm-8">
                    <input name="tableName" class="form-control" type="text" required>
                    <input name="tableRelationInfo" id="tableRelationInfo" class="form-control" type="hidden">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">表英文名称：</label>
                <div class="col-sm-8">
                    <input name="tableEnName" class="form-control" type="text" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">表别名：</label>
                <div class="col-sm-8">
                    <input name="aliasName" class="form-control" type="text" th:value="${aliasName}" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">表说明：</label>
                <div class="col-sm-8">
                    <textarea name="tableDescription" class="form-control"></textarea>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">状态：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">-->
<!--                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}" required>-->
<!--                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <h4 class="form-header h4">字段信息信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table" style="table-layout:fixed;"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
<!--    <th:block th:include="include :: bootstrap-table-fixed-columns-js"/>-->
<!--    <th:block th:include="include :: bootstrap-table-fixed-columns-css"/>-->
    <script th:inline="javascript">
        var prefix = ctx + "table/table"
        var fieldTypeDatas = [[${@dict.getType('fieldType')}]];
        var fkFieldTypeDatas = [[${@dict.getType('fkFieldType')}]];
        var fieldDataTypeDatas = [[${@dict.getType('fieldDataType')}]];
        var mysqlFieldDataTypeDatas = [[${@dict.getType('mysqlFieldDataType')}]];
        var isRequiredDatas = [[${@dict.getType('yesOrNo')}]];
        var isInParamDatas = [[${@dict.getType('yesOrNo')}]];
        var yesOrNo = [[${@dict.getType('yesOrNo')}]];
        var isRiskDatas = [[${@dict.getType('sys_yes_no')}]];
        var sysYesNo = [[${@dict.getType('sys_yes_no')}]];
        var isFieldStatusDatas = [[${@dict.getType('sys_yes_no')}]];
        var categoryDatas = [[${@dict.getType('fieldCategory')}]];
        $("#form-table-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $("#tableRelationInfo").val(JSON.stringify(tableRelationInfo));
                $.operate.saveTab(prefix + "/add", $('#form-table-add').serialize());
            }
        }

        $("body").on('change', ".fieldType", function(e) {
            if ($(this).val() == 2) {
                $(this).parent().find("a").show();
            } else {
                $(this).parent().find("a").hide();
            }
        }).on('click', '.fieldEnum', function () {
            var input = $(this).parent().find('input')[0];
            var dictId = $(input).val();
            var btn = ['确定', '取消'];
            var options = {
                title: '选择枚举',
                width: $(window).width() - 50,
                height: $(window).height() - 50,
                url: prefix + "/selectFieldEnum?dictId=" + dictId,
                btn: btn,
                callBack: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    var dict = iframeWin.contentWindow.submitHandler(index, layero);
                    if (dict) {
                        $(input).val(dict);
                    } else {
                        $(input).val(0);
                    }
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        }).on('change', '.isFieldEnum', function () {
            if ($(this).val() == 'Y') {
                $(this).parent().find("a").show();
            } else {
                $(this).parent().find("a").hide();
            }
        });
        var recordIndex=0;
        $(function() {
            var options = {
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                height:500,

                fixedColumns: true,
                fixedNumber: 5,
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    width: 50,
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'fieldName',
                    align: 'center',
                    title: '字段名称',
                    width: 200,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].fieldName' value='%s' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'fieldEnName',
                    align: 'center',
                    title: '字段英文名称',
                    width: 200,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].fieldEnName' value='%s' required>", index, value);
                        return html;
                    }
                    },
                    // {
                    //     field: 'mysqlFieldName',
                    //     align: 'center',
                    //     title: 'mysql字段名称',
                    //     width: 200,
                    //     formatter: function(value, row, index) {
                    //         var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].mysqlFieldName' value='%s' required>", index, value);
                    //         return html;
                    //     }
                    // },
                    {
                        field: 'category',
                        align: 'center',
                        title: '分组',
                        width: 100,
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("fieldInfoList[%s].category", index);
                            return $.common.dictToSelect(categoryDatas, value, name);
                        }
                    },
                    {
                        field: 'isFieldStatus',
                        align: 'center',
                        title: '是否状态字段',
                        width: 100,
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("fieldInfoList[%s].isFieldStatus", index);
                            return $.common.dictToSelect(isFieldStatusDatas, value, name);
                        }
                    },
                    {
                        field: 'isFieldEnum',
                        align: 'center',
                        title: '是否枚举字段',
                        width: 100,
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("fieldInfoList[%s].isFieldEnum", index);
                            var select = $.common.dictToSelect(isFieldStatusDatas, value, name, 'isFieldEnum');
                            var html = $.common.sprintf("<input class='form-control' type='hidden' name='fieldInfoList[%s].dictId' value='%s' required>", index, row.dictId || 0);
                            if (value == 'Y') {
                                return select + html + "<a class='fieldEnum'>设置枚举</a>";
                            }
                            return select + html + "<a style='display: none' class='fieldEnum'>设置枚举</a>";
                        }
                    },
                {
                    field: 'fieldType',
                    align: 'center',
                    title: '字段类型',
                    width: 150,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].fieldType", index);
                        var select = $.common.dictToSelect(fieldTypeDatas, value, name, 'fieldType');
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='fieldInfoList[%s].recordIndex' value='%s' required>", index, row.recordIndex);
                        if (value == '2') {
                            return select + html + "<a onclick='setFkRelation("+row.recordIndex+")'>设置外健关系</a>";
                        }
                        return select + html + "<a style='display: none' onclick='setFkRelation("+row.recordIndex+")'>设置外健关系</a>";
                    }
                },
                {
                    field: 'fkFieldType',
                    align: 'center',
                    title: '外键类型',
                    width: 150,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].fkFieldType", index);
                        return $.common.dictToSelect(fkFieldTypeDatas, value, name);
                    }
                },
                    {
                        field: 'fieldDataType',
                        align: 'center',
                        title: '字段数据类型',
                        width: 150,
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("fieldInfoList[%s].fieldDataType", index);
                            return $.common.dictToSelect(fieldDataTypeDatas, value, name);
                        }
                    },
                    {
                        field: 'fieldLength',
                        align: 'center',
                        title: '字段长度',
                        width: 100,
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].fieldLength' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'minLength',
                        align: 'center',
                        title: '最小长度',
                        width: 100,
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].minLength' value='%s'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'mysqlFieldDataType',
                        align: 'center',
                        title: 'mysql字段数据类型',
                        width: 150,
                        formatter: function(value, row, index) {
                            var name = $.common.sprintf("fieldInfoList[%s].mysqlFieldDataType", index);
                            return $.common.dictToSelect(mysqlFieldDataTypeDatas, value, name);
                        }
                    },
                    {
                        field: 'mysqlFieldLength',
                        align: 'center',
                        title: 'mysql字段长度',
                        width: 100,
                        formatter: function(value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].mysqlFieldLength' value='%s'>", index, value);
                            return html;
                        }
                    },
                {
                    field: 'mockData',
                    align: 'center',
                    title: '模拟数据',
                    width: 100,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].mockData' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'mockDescription',
                    align: 'center',
                    title: '模拟数据明细举例',
                    width: 300,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].mockDescription' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'fieldStory',
                    align: 'center',
                    title: '字段需求故事',
                    width: 300,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].fieldStory' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'isChange',
                    align: 'center',
                    title: '是否记录版本',
                    width: 100,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].isChange", index);
                        return $.common.dictToSelect(sysYesNo, value, name);
                    }
                },
                {
                    field: 'isRequired',
                    align: 'center',
                    title: '是否必填',
                    width: 100,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].isRequired", index);
                        return $.common.dictToSelect(isRequiredDatas, value, name);
                    }
                },
                {
                    field: 'isInParam',
                    align: 'center',
                    title: '是否作为入参',
                    width: 100,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].isInParam", index);
                        return $.common.dictToSelect(isInParamDatas, value, name);
                    }
                },
                {
                    field: 'isRisk',
                    align: 'center',
                    title: '是否风险点',
                    width: 100,
                    formatter: function(value, row, index) {
                        var name = $.common.sprintf("fieldInfoList[%s].isRisk", index);
                        return $.common.dictToSelect(isRiskDatas, value, name);
                    }
                },
                {
                    field: 'riskRemark',
                    align: 'center',
                    title: '风险备注',
                    width: 300,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fieldInfoList[%s].riskRemark' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'orderNum',
                    align: 'center',
                    title: '排序',
                    width: 70,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='number' name='fieldInfoList[%s].orderNum' value='%s'>", index, value);
                        return html;
                    }
                }]
            };
            $.table.init(options);
        });
        var tableRelationInfo = {};
        function setFkRelation(i) {
            var fkFieldInfo = tableRelationInfo[i] || '';

            var dataStr = encodeURIComponent(fkFieldInfo);
            var btn = ['确定', '取消'];
            var options = {
                title: '设置外健关系',
                width: $(window).width() - 50,
                height: $(window).height() - 50,
                url: prefix + "/setFkRelation?index=" + i + "&fkFieldInfo=" + dataStr + "&tableId=",
                btn: btn,
                callBack: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    var fieldInfo = iframeWin.contentWindow.submitHandler(index, layero);
                    if (fieldInfo) {
                        tableRelationInfo[i] = fieldInfo;
                    } else {
                        delete tableRelationInfo[i];
                    }
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        }

        function addColumn() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            sub.editColumn();
        	
            $("#" + table.options.id).bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    fieldName: "",
                    fieldEnName: "",
                    mysqlFieldName: "",
                    category: "",
                    isFieldStatus: "",
                    isFieldEnum: "",
                    fieldType: "",
                    fkFieldType: "",
                    fieldDataType: "",
                    fieldLength:"",
                    minLength:"",
                    mysqlFieldDataType: "",
                    mysqlFieldLength:"",
                    mockData: "",
                    mockDescription: "",
                    fieldStory: "",
                    isRequired: "Y",
                    isChange: "N",
                    isInParam: "Y",
                    isRisk: "N",
                    riskRemark: "",
                    orderNum: "",
                    recordIndex:recordIndex
                }
            });
            recordIndex ++;
        }
    </script>
</body>
</html>